var imgfill={
    elem:"",
    sccess:"",
    fail:"",
    num:3,
    url:"",//图片地址
    _m:false,//移动
    _x:0,
    _y:0,
    _w:0,
    _h:0,
    smallX:0,
    smallY:0,
    blockX:0,
    blockY:0,
    finish:false,
    view:function(){
        // console.log(imgfill.imgdata);
        return m("div",{style:"border:0;padding:0;margin:0;width:400px; height:300px; position:fixed; left:calc(50% - 200px); top:calc(50vh - 150px); background-color:white; box-shadow:0 0 5px silver;"},[
            m("div",{style:"border:0;padding:0;margin:0;width:400px; line-height:40px; text-align:center; color:#666666; border-bottom:soild 1px silver; transition:all 0.3s;"},"请完成拼图(余"+imgfill.num+"次)"),

            m("div#imgfillsmalldata",{style:"width:400px; height:200px; background-image:url('"+imgfill.url+"'); background-repeat: no-repeat; background-position: -"+imgfill.smallX+"px -"+imgfill.smallY+"px;"}),

            m("div",{style:"width:40px; height:40px; background-color:silver; box-shadow:0 0 -5px silver; position:absolute; top:"+(imgfill.blockY-imgfill.smallY+40)+"px;left:"+(imgfill.blockX-imgfill.smallX)+"px;"}),

            m("div#imgfillblockimg",{style:"width:40px; height:40px; box-shadow:0 0 5px silver; position:absolute; background-image:url('"+imgfill.url+"'); background-repeat: no-repeat; background-position: -"+imgfill.blockX+"px -"+imgfill.blockY+"px; position:absolute; top:"+(imgfill.blockY-imgfill.smallY+40)+"px; left:0;"}),

            m("div",{style:"border:0;padding:0;margin:0;display:flex; height:40px; padding:10px 20px;"},[
                m("div",{style:"flex:1; display:flex; background-color:#d5d5d5; justify-content: flex-start;"},[
                    m("div",{style:"width:0px;background-color:#f2f2f2;"}),
                    m("div",{style:"width:40px; height:40px; box-shadow:0 0 5px silver; background-color:white; transform: scale(1.1);",onmousedown:imgfill.StartMove,onmousemove:imgfill.Move,onmouseup:imgfill.EndMove2,onmouseover:imgfill.EndMove})
                ])
            ])
        ])
    },
    StartMove:function(event){
        imgfill._m=true;
        imgfill._x=event.clientX;
        imgfill._y=event.clientY;
        this.style.transform="scale(1)";
    },
    Move:function(event){
        var nowX=event.clientX;
        if(imgfill._m){
            var moveData=(nowX-imgfill._x)>0?nowX-imgfill._x:0;
            moveData=moveData>320?320:moveData;
            this.parentNode.querySelector("div").style.width=moveData+"px";
            document.querySelector("#imgfillblockimg").style.left=moveData+"px";
            if(moveData>imgfill.blockX-imgfill.smallX-5 && moveData<imgfill.blockX-imgfill.smallX+5){
                this.parentNode.querySelector("div").style.backgroundColor="green";
                imgfill.finish=true;
            }else{
                this.parentNode.querySelector("div").style.backgroundColor="#f2f2f2";
                imgfill.finish=false;
            }
        }
    },
    EndMove:function(){
        this.style.transform="scale(1.1)";
        imgfill._m=false
    },
    EndMove2:function(){
        this.style.transform="scale(1.1)";
        imgfill._m=false
        if(!imgfill.finish){
            imgfill.num--;
            if(imgfill.num<1){
                imgfill.fail();
                return;
            }
            this.parentNode.querySelector("div").style.width="0px";
            imgfill.smallX=parseInt(Math.random()*(imgfill._w-440));
            imgfill.smallY=parseInt(Math.random()*(imgfill._h-240));
            imgfill.blockX=parseInt(Math.random()*360)+imgfill.smallX;
            imgfill.blockY=parseInt(Math.random()*160)+imgfill.smallY;
            m.render(imgfill.elem,m(imgfill));
            return;
        }
        imgfill.sccess();
    },
    Show:function(elem,url,num=3,sccess,fail){
        imgfill.url=url;
        imgfill.elem=elem;
        imgfill.num=num;
        imgfill.sccess=sccess;
        imgfill.fail=fail;
        //获得大图
        var img=new Image();
        img.src=url;
        img.onload=function(){
            imgfill._w=img.width;
            imgfill._h=img.height;
            imgfill.smallX=parseInt(Math.random()*(img.width-440));
            imgfill.smallY=parseInt(Math.random()*(img.height-240));
            imgfill.blockX=parseInt(Math.random()*360)+imgfill.smallX;
            imgfill.blockY=parseInt(Math.random()*160)+imgfill.smallY;
            m.render(elem,m(imgfill));
        }
    }
}